import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/resources/widgets/put_paper_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:motion_toast/motion_toast.dart';
import 'package:motion_toast/resources/arrays.dart';
import 'package:nine_grid_view/nine_grid_view.dart';
import 'package:nylo_framework/nylo_framework.dart';

import '../../bootstrap/helpers.dart';
import 'drawn_paper_widget.dart';
import 'image_widget.dart';

class Paper extends StatefulWidget {
  Paper({Key? key}) : super(key: key);

  static String state = "paper";

  @override
  _PaperState createState() => _PaperState();
}

class _PaperState extends NyState<Paper> {
  int tabIndex = 0;
  PageController pageController = PageController(initialPage: 0);

  List<String> titles = ['放入的纸条', '抽到的纸条'];

  _PaperState() {
    stateName = Paper.state;
  }

  @override
  init() async {
    super.init();
  }

  @override
  stateUpdated(dynamic data) async {
    // e.g. to update this state from another class
    // updateState(Paper.state, data: "example payload");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.symmetric(horizontal: 10.w),
          padding: EdgeInsets.symmetric(vertical: 30.w),
          decoration: BoxDecoration(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: List.generate(
                  titles.length,
                  (index) => TabItemPaper(
                    title: titles[index],
                    selected: tabIndex == index,
                    click: () => setState(() {
                      tabIndex = index;
                      pageController.animateToPage(index,
                          duration: Duration(milliseconds: 100),
                          curve: Curves.bounceIn);
                    }),
                  ),
                ),
              ),
              SvgPicture.asset("public/assets/images/nav.svg",
                  width: 35.w, height: 35.h),
            ],
          ),
        ),
        Expanded(
          child: PageView(
            controller: pageController,
            children: [PutPaper(), DrawnPaper()],
            onPageChanged: (index) {
              setState(() {
                tabIndex = index;
              });
            },
          ),
        )
      ],
    );
  }
}

class TabItemPaper extends StatefulWidget {
  String title;
  bool selected;
  Function click;

  TabItemPaper(
      {required this.title, required this.selected, required this.click});

  @override
  State<TabItemPaper> createState() => _TabItemPaperState();
}

class _TabItemPaperState extends State<TabItemPaper> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => widget.click(),
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: widget.selected
                  ? ThemeColor.get(context).background.withOpacity(0.6)
                  : Colors.transparent, // 下边框颜色
              width: 4.2, // 下边框宽度
              style: BorderStyle.solid, // 下边框样式
            ),
          ),
        ),
        child: Text(
          widget.title,
          style: TextStyle(
              fontSize: widget.selected ? 40.sp : 30.sp,
              fontWeight: widget.selected ? FontWeight.bold : FontWeight.w400,
              color:
                  ThemeColor.get(context).primaryBackgroundDeep.withOpacity(1)),
        ),
      ),
    );
  }
}
